<!-- 采用html5  -->
<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">

    <!-- 页面显示适应移动设备 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

    <title>监测系统</title>
    <link rel="stylesheet" href="resources\we-vue\style.css">
    <link rel="stylesheet" href="resources\css\font-awesome.min.css">
    <style>
        /*元素选择器*/

        html{
            height:100%;
        }
        body{
            height:100%;
            padding:0px;/*内边距*/
            margin:0px;/*外边距*/
        }  
        /* 类选择器 */
        .my-container{
            width:100%;
            height:100%;
            background-color: #f0f0f0;
        }
        .my-title{
             font-size:30px;
            text-align: center;/*水平居中*/
            color:#111111;
            padding-top:10px;
            padding-bottom:0px;
        }  
    </style>
</head>

<body>
    <!-- div ：矩形区域 -->
    <div id="app" class="my-container">

        <wv-header title="监测系统" :fixed="false" background-color="#000000">
            <div slot="left">
                <i class="fa fa-angle-left" @click="back"></i>
            </div>
        </wv-header>

        <div class="my-title">修改密码</div>

        <div style="padding-left:3px;padding-right:3px;box-sizing: border-box;">

            <wv-group>
                <wv-input label="旧密码" placeholder="请输入旧密码" type="password" v-model="emp.e_pwd"></wv-input>
                <wv-input label="新密码" placeholder="请输入新密码" type="password" v-model="emp.e_npwd"></wv-input>
                <wv-input label="新密码" placeholder="重新输入新密码" type="password" v-model="emp.e_nnpwd"></wv-input>
            </wv-group>

            <wv-button type="primary" style="margin-top:20px;" @click="confirm">确认</wv-button>

        </div>

    </div>

</body>

<script src="resources\js\vue.min.js"></script>
<script src="resources\js\jquery.min.js"></script>
<script src="resources\we-vue\index.js"></script>
<script src="resources\layer_mobile\layer.js"></script>
<script src="resources\js\my.js"></script>

<script>
    //Vue对象的作用就是渲染界面,需要绑定一个元素
    new Vue({
        el: '#app',
        data: {
            emp: {
                e_pwd: '',
                e_npwd: '',
                e_nnpwd: '',
            }
        },
        methods: {
            confirm() {
                if (this.emp.e_pwd == '') {
                    TopTips('请输入旧密码！');
                    return;
                }
                if (this.emp.e_npwd == '') {
                    TopTips('请输入新密码！');
                    return;
                }
                if (this.emp.e_nnpwd == '') {
                    TopTips('请重新输入新密码！');
                    return;
                }
                if (this.emp.e_pwd == this.emp.e_npwd) {
                    TopTips('与旧密码重复！');
                    return;
                }
                if (this.emp.e_npwd != this.emp.e_nnpwd) {
                    TopTips('两遍新密码不同！');
                    return;
                }
                Serv.operate(
                    {
                        url: '/changep.jsp',
                        data: this.emp
                    },
                    () => {
                        setTimeout(
                            () => {
                                //通过js向另一个页面跳转
                                window.location.href = 'home.html';
                            },
                            1000
                        );
                    }
                );
            },
            back() {
                window.location.href = 'home.html';
            },
        }
    });

</script>

</html>